<template>
    <div>组合式api</div>
    <h2>Mouse position is at: {{ x }}, {{ y }}</h2>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useMouse } from "./tools/mouse"
// 使用外置组合式函数
const { x, y } = useMouse()

// 单独使用组合式函数
// const x = ref(0)
// const y = ref(0)

// function update(event) {
//     x.value = event.pageX
//     y.value = event.pageY
// }

// onMounted(() => window.addEventListener('mousemove', update))
// onUnmounted(() => window.removeEventListener('mousemove', update))
</script>